<template>
  <div class="about">
   <div class="tup">
     <div class="top">
       云音乐
    </div>
     <img :src="Pic" alt="">
     <div class="top-2">
       更新时间:06月17日
    </div>
   </div>
   <div class="songlist"  style="margin-bottom: 70px;">
     <ul>
       <li v-for="(item,id) in infosonglist.slice(0,20)" :key="item.id">
         <div class="content">
           <div class="number">{{id+1}}</div>
           <div class="playlist">
             <span>{{item.name}}</span>
             <div class="geshoulist">         
             <span v-for="ar in item.ar" :key="ar.id">{{ar.name}}/</span>
             <span>-{{item.al.name|ellipsis}}</span>
             </div> 
           </div>
           <div class="lab">
             <van-icon name="play-circle"/>
           </div>
         </div>
         <hr>
       </li>
     </ul>
     <span class="intact">查看完整榜单  > </span>
   </div>
  </div>
  
</template>
<script>

import axios from 'axios'
export default {
  data(){
    return{
      topListData:[],
      Pic:"",
      infosonglist:[],
    }
  },
  created(){
    this.getTopList()
  },
  methods:{
  getTopList(){
   axios.get("/api/playlist/detail?id=5059633707")
   .then(res => {
     console.log(res.data);
     console.log(res.data.playlist.tracks);
     this.infosonglist=res.data.playlist.tracks;
     this.topListData = res.data;
     this.Pic = res.data.playlist.coverImgUrl;
   })
   .catch(err => {
     console.error(err); 
   })
    },
  }
}
</script>
<style scoped>
.top{
  width:140px;
  height:10px;
  top:30px;
  position:absolute;
  color:white;
}
.top-2{
  width:220px;
  height:80px;
  top:180px;
  position:absolute;
  color:white;
}
.content{
  width: 100%;
  display: flex;
  margin-left: 2%;
  text-align: left;
}
.number{
  width: 6%;
  font-size: 20px;
  color: red;
  display: block;
  margin-left: 1;
}
.tup img{
    width: 100%;
    height: 220px;   
}
.songlist h4{
   text-align: left;
}
.songlist intact{
  text-align: center;
}
ul li{
  text-align: left;
}
.geshoulist > span{
  margin-left: 10px;
  color: grey;
  font-size: 5px;
}
hr{
  width: 100%;
  margin-left: 6%;
  background-color:rgb(190, 185, 185);
  border:none
}
.intact{
  color: rgb(175, 170, 170);
}
.playlist > span{
  margin-left: 15px;
}
.lab{
  width: 5%;
  display: block;
  margin-left: 0.5%; 
  font-size: 24px;
  color: rgb(161, 161, 161);
}
.playlist{
  width: 80%;
}
</style>
